import { useState } from 'react'
import {useRef} from 'react'
/* 
得到组件中的某个DOM元素  useRef
1. 使用useRef创建用于存储input元素的容器对象(内部使用current属性存储)
2. 将ref容器通过ref属性交给表单项标签 => 渲染时内部会将对应的input元素保存到ref容器的current属性上
3. 点击按钮时, 通过ref容器的current属性得到input DOM元素 => 就可以读取其value了
*/

// 1. 只在React组件函数内部中调用 Hook, 不要在组件函数外部调用
// const xxxRef = useRef()

/* 
Hook规则: 
1. 只在React组件函数内部中调用 Hook, 不要在组件函数外部调用
2. Hook调用的次数要固定, 所以不要在循环或条件判断中调用
*/
export default function HookTest2 () {

  // 1. 定义用于存储dom元素(input)的容器
  const inputRef = useRef(null)  // {current: null}

  const myRef = useRef() // {current: undefined}

  // 2. Hook调用的次数要固定, 所以不要在循环或条件判断中调用
  // if (Date.now()%2===1) {
  //   const [count , setCount] = useState(0)
  // }

  console.log(inputRef)

  const handleClick = () => {
    // 得到input
    /* 3. 点击按钮时, 通过ref容器的current属性得到input DOM元素 => 就可以读取其value了 */
    // console.log(inputRef)
    const input = inputRef.current

    // 得到input的value, 提示它
    alert(input.value)
  }
  
  return (
    <div>
      {/* 2. 将ref容器交给input标签 => React就会在渲染Input时将input DOM元素保存到容器对象的current属性上 */}
      <input type="text" ref={inputRef}/>
      <button onClick={handleClick}>提示输出的内容</button>
      <br />
      <button onClick={() => myRef.current = 'atguigu'}>保存数据</button>
      <button onClick={() => alert(myRef.current)}>读取数据</button>
    </div>
  )
}
